import React, { Component } from 'react';
import { Link } from "react-router-dom";

class UserList extends Component {
    constructor(){
        super();
        this.state={users:[]}
    }
    componentWillMount(){
        let users = JSON.parse(localStorage.getItem('USERS') || "[]");
        this.setState({users});
    }
    render() {
        return (
            <ul className="list-group">
               {
                   this.state.users.map((user,index)=>(
                       <li key={index} className="list-group-item">
                           <span>用户名:</span>
                           <Link to={`/user/detail/${user.id}`}>{user.username}</Link>
                          <span className="btn btn-danger" onClick={()=>{
                              let users=this.state.users.filter(item=>item.id!==user.id)
                              this.setState({users});
                          }}>删除</span>
                       </li>
                   ))
               }
           </ul>
        );
    }
}

export default UserList;